<template>
    <div class="course-content-list-page">
        <el-card shadow="never" class="mt-4">
            <el-form
                class="mb-6"
                :model="form"
                label-suffix="："
                inline
                label-position="right"
                ref="form"
            >
                <el-form-item label="关键词" prop="keyword">
                    <el-input
                        v-model="form.keyword"
                        placeholder="请输入关键词"
                        class="input-width w-full"></el-input>
                </el-form-item>
                <el-form-item label="角色" prop="themeId">
                    <el-select
                        v-model="form.themeId"
                        class="input-width w-full"
                        placeholder="请选择类型">
                        <el-option
                            v-for="item in themeOption"
                            :key="item.id"
                            :label="item.theme"
                            :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">搜索</el-button>
                    <el-button type="primary" @click="onResetFilters">重置</el-button>
                </el-form-item>
            </el-form>
            <el-button type="primary" @click="onAddClick">新增</el-button>
            <div class="mt-4" v-loading="loading">
                <el-table :data="data">
                    <el-table-column label="主题名称" prop="name"/>
                    <el-table-column label="主题描述" prop="description"/>
                    <el-table-column label="建议" prop="suggest">
                        <template slot-scope="{row}">
                            <div v-html="row.suggest"></div>
                        </template>
                    </el-table-column>
                    <el-table-column label="角色" prop="theme"/>
                    <el-table-column label="主题分类" prop="ability"/>
                    <el-table-column label="主题状态">
                        <template slot-scope="{row}">
                            {{ row.is_shelf ? '上架' : '下架' }}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="{row}">
                            <el-button type="text" @click="onTopClick(row)">
                                {{ row.is_shelf ? '下架' : '上架' }}
                            </el-button>
                            <el-button type="text" @click="onAddClick(row)">编辑</el-button>
                            <el-button type="text" @click="onDeleteClick(row)" class="red-color">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div v-if="totalElements > 0" class="footer flex justify-end items-center">
                <el-pagination
                    @current-change="fetchData"
                    @size-change="fetchData"
                    class="center"
                    :current-page.sync="form.page"
                    :page-size.sync="form.size"
                    :page-sizes="[10, 25, 50]"
                    layout="sizes, total, prev, pager, next, jumper"
                    :total="totalElements">
                </el-pagination>
            </div>
        </el-card>
    </div>
</template>

<script>

export default {
    components: {
    },
    mixins: [require('@/mixins/CacheQuery').default],
    data() {
        return {
            loading: false,
            drawer: false,
            data: [],
            form: {
                page: 1,
                size: 10,
                keyword: '',
                themeId: '',
            },
            totalElements: 0,
            themeOption: [],
        };
    },
    methods: {
        onSubmit() {
            this.form.page = 1;
            this.fetchData();
        },
        onResetFilters() {
            this.$refs.form.resetFields();
            this.onSubmit();
        },
        fetchData() {
            this.loading = true;
            API.get('elective/content', {params: this.form}).then((res) => {
                this.data = res.content;
                this.totalElements = res.pagination.total;
            }).finally(() => {
                this.loading = false;
            });
        },
        onEditClick(row) {
            this.onDialog();
            this.dialogForm = {...row};
            this.selectRow = {
                id: row.ability_id,
                theme_id: row.theme_id,
            };

            if (row.recommends && row.recommends.length) {
                for (const val of row.recommends) {
                    this.courseIds.push(val.id);
                }
            }
        },
        onDeleteClick(row) {
            $ele.$confirm('是否删除此主题？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => {
                this.loading = true;
                API.delete(`elective/content/${row.id}`, {
                }).then(() => {
                    $ele.$message.success('删除成功');
                    this.fetchData();
                }).finally(() => {
                    this.loading = false;
                });
            }).catch(() => { });
        },
        onTopClick(row) {
            const text = row.is_shelf ? '下架' : '上架';
            $ele.$confirm(`是否${text}此主题？`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => {
                this.loading = true;
                API.put(`elective/content/shelves/${row.id}`).then(() => {
                    $ele.$message.success('操作成功');
                    this.fetchData();
                }).finally(() => {
                    this.loading = false;
                });
            }).catch(() => { });
        },

        onAddClick(row) {
            const params = row.id ? {
                id: row.id,
            } : '';

            this.$router.push({
                name: 'Course.Content.Form',
                params,
            });
        },

        getThemeOption() {
            API.get('elective/theme/list').then(res => {
                this.themeOption = res;
            });
        },

    },
    mounted() {
        this.fetchData();
        this.getThemeOption();
    },
};
</script>

<style lang="scss">
.course-content-list-page {
    .footer {
        height: 44px;
        background: #f7f7f7;
        padding-left: 20px;
        padding-right: 20px;
    }

    .input-width {
        max-width: 300px;
    }

    .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
        margin-bottom: 0;
    }
}
</style>
